<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制面板 - 文档管理系统</title>
    <link rel="stylesheet" href="/css/style.css">
    <style>
        .dashboard-stats {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .stat-card {
            background-color: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            text-align: center;
        }
        .stat-value {
            font-size: 2.5rem;
            font-weight: bold;
            color: #007bff;
            margin: 10px 0;
        }
        .stat-label {
            color: #666;
            font-size: 1rem;
        }
        .shortcuts {
            margin-top: 40px;
        }
        .shortcut-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }
        .shortcut-card {
            display: flex;
            align-items: center;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 8px;
            transition: all 0.3s ease;
            text-decoration: none;
            color: #333;
        }
        .shortcut-card:hover {
            background-color: #e9ecef;
            transform: translateY(-3px);
        }
        .shortcut-icon {
            font-size: 24px;
            width: 40px;
            text-align: center;
            margin-right: 15px;
        }
        .shortcut-text {
            font-weight: bold;
        }
        
        /* 新的欢迎消息样式 */
        .welcome-message {
            background: linear-gradient(135deg, rgba(13, 71, 161, 0.7), rgba(33, 150, 243, 0.5));
            border-left: 4px solid #00c7be;
            padding: 25px;
            margin-bottom: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            animation: pulse-glow 3s infinite;
            position: relative;
            overflow: hidden;
        }
        
        .welcome-message::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to bottom right,
                rgba(10, 132, 255, 0.1),
                rgba(94, 92, 230, 0.1),
                rgba(0, 199, 190, 0.1)
            );
            transform: rotate(30deg);
            z-index: -1;
            pointer-events: none;
            animation: rotate 15s linear infinite;
        }
        
        .welcome-message h2 {
            font-size: 2rem;
            margin-bottom: 10px;
            background: linear-gradient(to right, #ffffff, #4ef2f8);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 10px rgba(78, 242, 248, 0.5);
            animation: text-flicker 5s infinite;
        }
        
        .welcome-message p {
            color: #ffffff;
            font-size: 1.1rem;
            line-height: 1.6;
            letter-spacing: 0.5px;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
        }
        
        .welcome-message span {
            color: #4ef2f8;
            font-weight: bold;
            position: relative;
            display: inline-block;
            text-shadow: 0 0 10px rgba(78, 242, 248, 0.8);
            animation: name-highlight 4s infinite;
        }
        
        /* 弹幕区域样式 */
        .danmaku-container {
            height: 200px;
            background: rgba(0, 20, 40, 0.3);
            border-radius: 10px;
            margin-bottom: 30px;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(10, 132, 255, 0.3);
            box-shadow: 0 0 20px rgba(0, 199, 190, 0.2) inset;
        }
        
        .danmaku-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 15px;
            background: linear-gradient(90deg, rgba(10, 132, 255, 0.3), rgba(0, 199, 190, 0.3));
            border-radius: 10px 10px 0 0;
        }
        
        .danmaku-title {
            color: #fff;
            font-size: 1.2rem;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(78, 242, 248, 0.5);
            display: flex;
            align-items: center;
        }
        
        .danmaku-title i {
            margin-right: 8px;
            color: #4ef2f8;
        }
        
        .danmaku-controls {
            display: flex;
            align-items: center;
        }
        
        .danmaku-controls button {
            background: rgba(10, 132, 255, 0.3);
            border: 1px solid rgba(78, 242, 248, 0.5);
            color: #fff;
            border-radius: 4px;
            padding: 5px 10px;
            margin-left: 8px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .danmaku-controls button:hover {
            background: rgba(10, 132, 255, 0.5);
            box-shadow: 0 0 10px rgba(78, 242, 248, 0.5);
        }
        
        .danmaku-content {
            height: calc(100% - 50px);
            position: relative;
            overflow: hidden;
        }
        
        .danmaku-item {
            position: absolute;
            display: inline-block;
            padding: 5px 12px;
            background: rgba(10, 132, 255, 0.2);
            border-radius: 20px;
            color: #fff;
            font-size: 14px;
            white-space: nowrap;
            border: 1px solid rgba(78, 242, 248, 0.3);
            box-shadow: 0 0 10px rgba(78, 242, 248, 0.3);
            animation-name: danmaku-move;
            animation-timing-function: linear;
            animation-fill-mode: forwards;
        }
        
        .danmaku-item.type-1 {
            background: rgba(10, 132, 255, 0.2);
            border-color: rgba(10, 132, 255, 0.5);
        }
        
        .danmaku-item.type-2 {
            background: rgba(0, 199, 190, 0.2);
            border-color: rgba(0, 199, 190, 0.5);
        }
        
        .danmaku-item.type-3 {
            background: rgba(94, 92, 230, 0.2);
            border-color: rgba(94, 92, 230, 0.5);
        }
        
        .danmaku-input-container {
            display: flex;
            padding: 10px 15px;
            background: rgba(0, 20, 40, 0.3);
            border-radius: 0 0 10px 10px;
            border-top: 1px solid rgba(10, 132, 255, 0.3);
        }
        
        .danmaku-input {
            flex: 1;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(78, 242, 248, 0.3);
            border-radius: 20px;
            padding: 8px 15px;
            color: #fff;
            outline: none;
        }
        
        .danmaku-input:focus {
            border-color: rgba(78, 242, 248, 0.8);
            box-shadow: 0 0 10px rgba(78, 242, 248, 0.3);
        }
        
        .danmaku-send {
            background: linear-gradient(90deg, #0a84ff, #00c7be);
            color: white;
            border: none;
            border-radius: 20px;
            padding: 8px 20px;
            margin-left: 10px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .danmaku-send:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(10, 132, 255, 0.5);
        }
        
        @keyframes danmaku-move {
            from { transform: translateX(100%); }
            to { transform: translateX(-100%); }
        }
        
        @keyframes pulse-glow {
            0% { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }
            50% { box-shadow: 0 5px 25px rgba(0, 199, 190, 0.5); }
            100% { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }
        }
        
        @keyframes rotate {
            0% { transform: rotate(30deg); }
            100% { transform: rotate(390deg); }
        }
        
        @keyframes text-flicker {
            0% { opacity: 1; }
            3% { opacity: 0.8; }
            6% { opacity: 1; }
            7% { opacity: 0.9; }
            8% { opacity: 1; }
            9% { opacity: 0.9; }
            10% { opacity: 1; }
            100% { opacity: 1; }
        }
        
        @keyframes name-highlight {
            0% { transform: scale(1); text-shadow: 0 0 10px rgba(78, 242, 248, 0.8); }
            50% { transform: scale(1.05); text-shadow: 0 0 20px rgba(78, 242, 248, 1); }
            100% { transform: scale(1); text-shadow: 0 0 10px rgba(78, 242, 248, 0.8); }
        }
    </style>
</head>
<body>
    <div class="dashboard-container">
        <div class="sidebar">
            <div class="sidebar-header">
                <h2>控制面板</h2>
            </div>
            <ul class="sidebar-menu">
                <li class="active"><a href="/dashboard">主页</a></li>
                <li><a href="/dashboard/profile">个人信息</a></li>
                <li><a href="/dashboard/change-password">修改密码</a></li>
                <li><a href="/dashboard/documents">文档管理</a></li>
                <li><a href="/dashboard/categories">分类管理</a></li>
                <li><a href="/danmaku">弹幕墙</a></li>
                <li><a href="/" target="_blank">访问首页</a></li>
                <li><a href="/logout">退出登录</a></li>
            </ul>
        </div>
        
        <div class="main-content">
            <div class="dashboard-header">
                <div class="dashboard-title">
                    <h1>控制面板</h1>
                </div>
            </div>
            
            <!-- 弹幕墙 -->
            <div class="danmaku-container">
                <div class="danmaku-header">
                    <div class="danmaku-title">
                        <i class="fas fa-comments"></i>
                        系统消息弹幕墙
                    </div>
                    <div class="danmaku-controls">
                        <button onclick="toggleDanmaku()">暂停/播放</button>
                        <button onclick="clearDanmaku()">清屏</button>
                    </div>
                </div>
                <div class="danmaku-content" id="danmakuContent"></div>
                <div class="danmaku-input-container">
                    <input type="text" class="danmaku-input" id="danmakuInput" placeholder="发送消息...">
                    <button class="danmaku-send" onclick="sendDanmaku()">发送</button>
                </div>
            </div>
            
            <!-- 欢迎消息 -->
            <div class="welcome-message">
                <h2>欢迎回来，<span th:text="${user != null ? user.username : '用户'}">用户名</span>！</h2>
                <p>这是您的个人控制面板，您可以在这里管理您的个人信息和文档。</p>
            </div>
            
            <!-- 统计信息 -->
            <div class="dashboard-stats">
                <div class="stat-card">
                    <div class="stat-value" th:text="${documentCount != null ? documentCount : 0}">12</div>
                    <div class="stat-label">文档总数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value" th:text="${categoryCount != null ? categoryCount : 0}">5</div>
                    <div class="stat-label">分类总数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value" th:text="${todayDocumentCount != null ? todayDocumentCount : 0}">20</div>
                    <div class="stat-label">今日新增文档</div>
                </div>
            </div>
            
            <div class="shortcuts">
                <h2>快捷链接</h2>
                <div class="shortcut-list">
                    <a href="/dashboard/profile" class="shortcut-card">
                        <div class="shortcut-icon">👤</div>
                        <div class="shortcut-text">更新个人信息</div>
                    </a>
                    <a href="/dashboard/change-password" class="shortcut-card">
                        <div class="shortcut-icon">🔒</div>
                        <div class="shortcut-text">修改密码</div>
                    </a>
                    <a href="/dashboard/documents" class="shortcut-card">
                        <div class="shortcut-icon">📝</div>
                        <div class="shortcut-text">管理文档</div>
                    </a>
                    <a href="/dashboard/categories" class="shortcut-card">
                        <div class="shortcut-icon">🗂️</div>
                        <div class="shortcut-text">管理分类</div>
                    </a>
                    <a href="/dashboard/documents/create" class="shortcut-card">
                        <div class="shortcut-icon">➕</div>
                        <div class="shortcut-text">创建新文档</div>
                    </a>
                    <a href="/dashboard/weblinks" class="shortcut-card">
                        <div class="shortcut-icon">🔗</div>
                        <div class="shortcut-text">网站链接管理</div>
                    </a>
                    <a href="/danmaku" class="shortcut-card">
                        <div class="shortcut-icon">💬</div>
                        <div class="shortcut-text">弹幕墙</div>
                    </a>
                    <a href="/" target="_blank" class="shortcut-card">
                        <div class="shortcut-icon">🏠</div>
                        <div class="shortcut-text">查看首页</div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <script src="/js/script.js"></script>
    
    <!-- 弹幕功能的JavaScript代码 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const danmakuArea = document.getElementById('danmakuContent');
            const danmakuInput = document.getElementById('danmakuInput');
            let isPaused = false;
            let danmakuSpeed = 10000; // 弹幕移动速度，单位毫秒
            
            // 预设的系统消息
            const systemMessages = [
                "欢迎使用科技文档管理系统",
                "您有新的系统通知，请查看",
                "文档已自动保存",
                "系统将在午夜进行例行维护",
                "有新的文档共享给您",
                "您的账户安全状态良好",
                "新功能发布：AI辅助写作",
                "数据同步已完成",
                "云端存储容量已更新",
                "推荐尝试新的文档模板"
            ];
            
            // 跟踪已使用的垂直位置
            const usedPositions = [];
            const laneHeight = 30; // 每个弹幕轨道的高度
            const maxLanes = 5;    // 最大轨道数量
            
            // 弹幕队列和处理状态
            const danmakuQueue = [];
            let isProcessingQueue = false;
            
            // 获取可用的垂直位置
            function getAvailablePosition() {
                // 计算可用的轨道数量
                const availableLanes = Math.floor((danmakuArea.offsetHeight - 10) / laneHeight);
                const lanes = Math.min(availableLanes, maxLanes);
                
                // 尝试找到一个未被使用的轨道
                for (let i = 0; i < lanes; i++) {
                    const position = i * laneHeight + 5;
                    if (!usedPositions.includes(position)) {
                        usedPositions.push(position);
                        return position;
                    }
                }
                
                // 如果所有轨道都被使用，选择一个随机轨道
                const randomLane = Math.floor(Math.random() * lanes);
                return randomLane * laneHeight + 5;
            }
            
            // 释放一个位置
            function releasePosition(position) {
                const index = usedPositions.indexOf(position);
                if (index !== -1) {
                    usedPositions.splice(index, 1);
                }
            }
            
            // 添加一条弹幕
            function addDanmaku(text, isSystem = false, colorType = null) {
                // 将弹幕添加到队列
                danmakuQueue.push({
                    text: text,
                    isSystem: isSystem,
                    colorType: colorType
                });
                
                // 如果队列没有在处理，开始处理
                if (!isProcessingQueue) {
                    processQueue();
                }
            }
            
            // 处理弹幕队列
            function processQueue() {
                if (danmakuQueue.length === 0) {
                    isProcessingQueue = false;
                    return;
                }
                
                isProcessingQueue = true;
                const item = danmakuQueue.shift();
                displayDanmaku(item.text, item.isSystem, item.colorType);
                
                // 固定间隔发送下一条弹幕
                setTimeout(processQueue, 1000); // 每秒发送一条弹幕
            }
            
            // 显示弹幕
            function displayDanmaku(text, isSystem, colorType) {
                if (isPaused) {
                    // 如果暂停了，将弹幕放回队列前面
                    danmakuQueue.unshift({
                        text: text,
                        isSystem: isSystem,
                        colorType: colorType
                    });
                    return;
                }
                
                const danmaku = document.createElement('div');
                danmaku.className = 'danmaku-item type-' + (colorType || (Math.floor(Math.random() * 3) + 1));
                danmaku.textContent = text;
                
                // 获取有序的垂直位置
                const top = getAvailablePosition() + 'px';
                danmaku.style.top = top;
                
                // 设置固定的动画持续时间
                danmaku.style.animationDuration = (danmakuSpeed / 1000) + 's';
                
                // 不添加延迟，确保从右侧立即开始
                danmaku.style.animationDelay = '0s';
                
                danmakuArea.appendChild(danmaku);
                
                // 动画结束后移除元素并释放位置
                danmaku.addEventListener('animationend', function() {
                    releasePosition(parseInt(top));
                    danmakuArea.removeChild(danmaku);
                });
            }
            
            // 发送弹幕到服务器并显示
            function sendDanmakuToServer(text) {
                const colorType = Math.floor(Math.random() * 3) + 1;
                
                // 显示本地弹幕
                addDanmaku(text, false, colorType);
                
                // 发送到服务器
                fetch('/danmaku/api/send', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `content=${encodeURIComponent(text)}&colorType=${colorType}`
                })
                .then(response => {
                    if (!response.ok) {
                        console.error('发送弹幕失败');
                    }
                    return response.json();
                })
                .catch(error => {
                    console.error('发送弹幕出错:', error);
                });
            }
            
            // 发送弹幕
            window.sendDanmaku = function() {
                const text = danmakuInput.value.trim();
                if (text) {
                    sendDanmakuToServer(text);
                    danmakuInput.value = '';
                }
            }
            
            // 按Enter键发送弹幕
            danmakuInput.addEventListener('keypress', function(event) {
                if (event.key === 'Enter') {
                    sendDanmaku();
                }
            });
            
            // 暂停/继续弹幕
            window.toggleDanmaku = function() {
                isPaused = !isPaused;
                const danmakuItems = danmakuArea.querySelectorAll('.danmaku-item');
                danmakuItems.forEach(item => {
                    item.style.animationPlayState = isPaused ? 'paused' : 'running';
                });
                
                // 如果恢复播放且队列有内容但没有在处理，重新开始处理
                if (!isPaused && danmakuQueue.length > 0 && !isProcessingQueue) {
                    processQueue();
                }
            }
            
            // 清除所有弹幕
            window.clearDanmaku = function() {
                danmakuArea.innerHTML = '';
                // 清空已使用的位置和队列
                usedPositions.length = 0;
                danmakuQueue.length = 0;
                isProcessingQueue = false;
            }
            
            // 定期添加系统弹幕
            function addSystemDanmaku() {
                if (!isPaused) {
                    const randomIndex = Math.floor(Math.random() * systemMessages.length);
                    const randomMessage = systemMessages[randomIndex];
                    addDanmaku("系统: " + randomMessage, true);
                }
                
                // 间隔添加系统弹幕
                const nextTimeout = 8000; // 固定8秒添加一条
                setTimeout(addSystemDanmaku, nextTimeout);
            }
            
            // 初始显示弹幕
            setTimeout(function() {
                // 先显示欢迎弹幕
                var welcomeSpan = document.querySelector('.welcome-message span');
                var username = welcomeSpan ? welcomeSpan.textContent : '用户';
                addDanmaku("系统: 欢迎回来，" + username + "！", true);
                
                // 再显示一些系统弹幕
                for (let i = 0; i < 3; i++) {
                    const randomIndex = Math.floor(Math.random() * systemMessages.length);
                    addDanmaku("系统: " + systemMessages[randomIndex], true);
                }
                
                // 开始定期添加系统弹幕
                setTimeout(addSystemDanmaku, 10000);
            }, 1000);
        });
    </script>
</body>
</html> 